<template>
  <div style="padding: 0px 0px;background-color: rgb(239, 238, 238);height: 100%;overflow-y: auto;">
    <div style="height: 527px;width: 59.5%;background-color: #fff;display: inline-block;border-radius: 5px;">
            <appPieBox v-if="appList" :appList="appList" />
        </div>
        <div style="height: 527px;width: 39.5%;background-color: #fff;margin-top:10px;display: inline-block;margin-left: 1%;border-radius: 5px;">
            <appType v-if="appTypeListData" :appTypeListData="appTypeListData" style="margin-top: 10px;" />
        </div>
        <div style="min-height: 400px;background-color: #fff;border-radius: 5px;padding: 15px;">
            <!-- <div style="width: 200px;">
                <el-input v-model="searchKey"></el-input>
            </div> -->
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <h2 style="display: flex;align-items: center;"> <img src="../../assets/install.png" width="25" height="25" alt=""> <span style="margin-left: 5px;">{{$t('analyze.shiyongguoappList')}}</span></h2>
                <!-- <div>
                    <span>检材编号：</span>
                    <el-select :popper-append-to-body="false"  @change="changeSelect" v-model="value1" placeholder="请选择活动区域">
                        <el-option :label="item" :value="item" v-for="(item,index) in proofList" :key="index"></el-option>
                    </el-select>
                </div> -->
                
                <div>
                    <!-- <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                        </el-pagination>
                    </div> -->
                </div>
            </div>
            <el-table
                :data="installAppList"
                border
                stripe
                height="400"
                style="width: 100%;">
                <!-- <el-table-column
                prop="package_name"
                label="app名称"
                >
                </el-table-column> -->
                <el-table-column
                prop="package_name"
                :label="$t('analyze.apppackname')"
                >
                </el-table-column>
            </el-table>
        </div>
     
  </div>
</template>

<script>
import appPieBox from './appPieBox.vue'
import appType from './appType.vue'
import { smsAppListApi,getAppSmsDataApi,getProofListApi,installSmsAppApi,getAppTypeListApi } from '@/api/proofOnly/index'

export default {
    name:'appCircle',
    components:{
        appPieBox,
        appType
    },
    data(){
        return{
            appTypeListData:[],
            installAppList:[],
            proofList:[],
            appList:[],
            value1:'',
            currentPage4: 4,
            searchKey:'',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
                }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
                },{
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
                }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
                }]
        }
    },
    mounted(){

    },
    created(){
        this.getProofList();
    },
    methods:{
        changeSelect(){
            this.installSmsApp();
            this.initSmsEchartsApp();
            this.initAppTypeList();
        },
        getProofList(){
            this.value1 = sessionStorage.getItem('analyzeProof')
                this.installSmsApp();
                this.initSmsEchartsApp();
                this.initAppTypeList();
        // getProofListApi({}).then(res=>{
        //   if(res.data.length>0){
        //     this.proofList = res.data;
        //     this.value1 = res.data[0];
        //     this.installSmsApp();
        //     this.initSmsEchartsApp();
        //     this.initAppTypeList();
        //   }
        // }).catch(res=>{

        // })
      },
      initAppTypeList(){
        let data = {
            proof_num:this.value1
        }
        getAppTypeListApi(data).then(res=>{
            this.appTypeListData = res.data;
        }).catch(error=>{

        })
      },
      installSmsApp(){
        let data = {
            proof_num:this.value1
        }
        installSmsAppApi(data).then(res=>{
            this.installAppList = res.data;
        }).catch(error=>{

        })
      },
        initSmsEchartsApp(){
            let data = {
                proof_num:this.value1
            }
            getAppSmsDataApi(data).then(res=>{
                this.appList = res.data;
            }).catch(error=>{

            })
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>

<style>

</style>